<template>
  <div class="about">
    <!-- <button @click="aaaaaaaa">撒打发打发大大撒法</button> -->
    <!-- <h1>This is an about page</h1> -->
    <!-- <router-view></router-view> -->
    <div class="top1111">
      <img @click="previous" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>商品订单</span>
      <span></span>
    </div>
    <van-search
      v-model="value"
      shape="round"
      background="#ffffff"
      placeholder="关键字查询"
      :show-action="right"
      action-text="搜索"
    />
    <van-tabs
      v-model="active"
      color="#ffcc33"
      title-active-color="#3939bc"
      @click="clicknav"
    >
      <van-tab title="全部"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>
    </van-tabs>
    <div class="box" v-for="(item, index) in records" :key="index">
      <div class="top">
        <h5>商品描述</h5>
        <span><img src="../assets/图标/jiantou.png" alt="" /></span>
      </div>
      <van-card
        :title="item.title"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <p><span>下单时间</span>{{ item.orderTime }}</p>
          <p><span>下单人</span>{{ item.orderUserName }}</p>
        </template>
      </van-card>
      <div class="bottom">
        <button
          :style="{ background: red, color: txycolor, border: borderbor }"
          @click="tiaozhuan(item, $event)"
        >
          {{ item.status == 0 ? "发货" : "" }}
          {{ item.status == 10 ? "收货" : "" }}
          {{ item.status == 20 ? "评价" : "" }}
          {{ item.status == 30 ? "已评价" : "" }}
        </button>
      </div>
    </div>
    <!-- 分页 -->
    <van-pagination
      @change="qinhuan"
      v-model="currentPage"
      :page-count="pages"
      mode="simple"
      v-if="records.length > 0"
    />
    <!-- 无内容显示 -->
    <van-empty
      v-else
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="没有内容哦"
    />
  </div>
</template>
<script>
import { Dialog } from "vant";
import { GetShouList } from "../request/aip";
import {
  GetAllList,
  GetStayList,
  GetClosedList,
  GetPingList,
} from "../request/aip";

export default {
  data() {
    return {
      value: "",
      right: true,
      active: 0,
      // 列表详细数据
      records: [],
      //当前页
      currentPage: 1,
      // 总页数
      pages: "",
      // 颜色 按钮颜色
      red: "#cfc",
      // 按钮文本内容
      txy: "评价1111",
      // 按钮文本颜色
      txycolor: "#000",
      // 边框
      borderbor: "",
      // 状态码
      code: "",
      aaaaa: "李攸",
    };
  },
  methods: {
    previous() {
      this.$router.go(-1);
    },
    tiaozhuan(item, e) {
      // console.log(e.path[0].innerText);

      // console.log(item.status); //状态码  根据码的不同修改内容
      // console.log(this.txy);
      // let item = this.records;
      // console.log(item, e.srcElement);
      // return;
      let tiao = e.path[0].innerText;
      if (tiao == "发货") {
        // console.log(item);
        this.$router.push({ name: "Goods", params: { item } });
      } else if (tiao == "收货") {
        Dialog.confirm({
          title: "是否确认收货",
          // message: "弹窗内容",
        })
          .then(() => {
            // on confirm
            // console.log(123);
            GetShouList({
              serialNo: item.serialNo,
            }).then((res) => {
              console.log(res);
              this.$router.go(0);
            });
          })
          .catch((res) => {
            // console.log(res);
          });
      } else if (tiao == "评价") {
        this.$router.push({ name: "Said", params: { item } });
      } else if (tiao == "已评价") {
        this.$router.push({ name: "Said", params: { item } });
      }
    },

    // 分页点击
    qinhuan() {
      // console.log(this.active);
      // 根据当前页面不同 分页点击请求的接口也不同
      if (this.active == 0) {
        // console.log(123456);
        // 全部
        GetAllList({
          current: String(this.currentPage),
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          this.records = res.data.records;
        });
      } else if (this.active == 1) {
        // 待发布
        // console.log(1232456567677);
        GetStayList({
          current: String(this.currentPage),
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          this.records = res.data.records;
        });
      } else if (this.active == 2) {
        // console.log(1231241424124132412);
        GetClosedList({
          current: String(this.currentPage),
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          this.records = res.data.records;
        });
      } else if (this.active == 3) {
        GetPingList({
          current: String(this.currentPage),
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          this.records = res.data.records;
        });
      }
    },

    // 导航栏点击
    clicknav(idnex, title) {
      // console.log(this.active);
      // 每次点击回到第一页
      this.currentPage = 1;

      // 判断不同的点击文本内容 访问不同接口
      if (title == "待发货") {
        GetStayList({
          current: "1",
          size: "10",
          // keyword: title,
        }).then((res) => {
          // console.log(res);
          this.records = res.data.records;
          this.pages = res.data.pages;
          this.red = "#003399";
          this.txy = "发货";
          this.txycolor = "#fff";
          // console.log(this.active);
        });
      } else if (title == "全部") {
        GetAllList({
          current: "1",
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          // console.log(res);
          this.records = res.data.records;
          this.pages = res.data.pages;
          this.red = "#ffcc33";
          this.txy = "评价";
          this.txycolor = "#fff";
        });
      } else if (title == "待收货") {
        // console.log(title);

        GetClosedList({
          current: "1",
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          // console.log(res);
          this.records = res.data.records;
          this.pages = res.data.pages;
          this.red = "#ffffff";
          this.txy = "收货";
          this.txycolor = "#4b8cff";
          this.borderbor = "1px solid #4b8cff";
        });
      } else if (title == "待评价") {
        // console.log(title);

        GetPingList({
          current: "1",
          size: "10",
        }).then((res) => {
          // console.log(res.data.records);
          // console.log(res);
          this.records = res.data.records;
          this.pages = res.data.pages;
          this.red = "#ffcc33";
          this.txy = "评价";
          this.txycolor = "#fff";
          this.borderbor = "none";
        });
      }
    },
  },
  created() {
    // 初始化
    GetAllList({
      current: "1",
      size: "10",
    }).then((res) => {
      this.records = res.data.records;
      this.pages = res.data.pages;
      this.red = "#ffcc33";
      this.txy = "评价";
      this.txycolor = "#fff";
    });
  },
};
</script>
<style lang="less" scoped>
.van-search__action {
  color: #003399;
}
.van-tabs {
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  margin-bottom: 5px;
}
.about {
  height: 100vh;
  background-color: #f5f5f5;
}
.van-card:not(:first-child) {
  margin: 0;
}
.box {
  margin-bottom: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;
    h5 {
      color: #5b5b5b;
    }
    span {
      img {
        display: block;
        height: 13px;
        // width: 13px;
      }
    }
  }
  .van-card {
    background-color: #fff;
  }
  .bottom {
    background-color: #fff;
    text-align: right;
    padding: 8px 10px 8px 0;
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    button {
      padding: 6px 25px;
      background-color: #ffcc33;
      color: #fff;
      margin-right: 0;
      border: none;
      border-radius: 22px;
    }
  }
}
span {
  color: #a7a7a7;
  margin-right: 1em;
}
.van-card__title {
  margin-top: 10px;
}
p {
  margin-top: 5px;
}
.attt {
  width: 100%;
  height: 40px;
  background-color: #0094ff;
  color: #cfc;
}
.top1111 {
  display: flex;
  background-color: #003399;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 10px;
  span {
    color: #fff;
    font-size: 16px;
  }
  img {
    width: 10px;
    height: 20px;
  }
}
</style>